<template>
  <div>
    <!-- 日期范围控件区域 -->
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      @change="fetchData()"
    ></el-date-picker>
    <!-- 饼图区域 -->
    <div id="main" style="width: 100%;height:400px;"></div>
    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="categoryName"
        label="分类名称"
        width="300"
      ></el-table-column>
      <el-table-column
        prop="num"
        label="销售数量"
        width="300"
      ></el-table-column>
      <el-table-column
        prop="numProportion"
        label="数量比例"
        width="300"
      ></el-table-column>
      <el-table-column prop="money" label="销售额" width="309">
        <template slot-scope="scope"> ￥{{ scope.row.money / 100 }} </template>
      </el-table-column>
      <el-table-column
        prop="moneyProportion"
        label="金额比例"
        width="310"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      tableData: [],
      dateRange: [],
      legendData: [],
      seriesNumData: [],
      seriesMoneyData: [],
      // 日期选择器中的默认快捷键
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  methods: {
    // 时间转换
    dateToString(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var d = date.getDate();
      return `${y}-${m}-${d}`;
    },
    async fetchData() {
      this.legendData = [];
      this.seriesMoneyData = [];
      this.seriesNumData = [];
      var date1 = this.dateRange[0];
      var date2 = this.dateRange[1];
      const d1 = this.dateToString(date1);
      const d2 = this.dateToString(date2);
      const { data: res } = await this.$http.get(
        `vi/orders/category/report/categoryCount?date1=${d1}&date2=${d2}`
      );
      this.tableData = res.data;
      // 定义变量接收总数 nums 数量总数 moneys 金额总数
      var nums = 0;
      var moneys = 0;
      for (var i = 0; i < res.data.length; i++) {
        nums += res.data[i].num;
        moneys += res.data[i].money;
      }
      for (var k = 0; k < res.data.length; k++) {
        res.data[k].numProportion =
          Math.round((res.data[k].num / nums) * 100) + "%";
        res.data[k].moneyProportion =
          Math.round((res.data[k].money / moneys) * 100) + "%";
        this.legendData.push(res.data[k].categoryName);
        this.seriesNumData.push({
          value: res.data[k].num,
          name: res.data[k].categoryName
        });
        this.seriesMoneyData.push({
          value: res.data[k].money,
          name: res.data[k].categoryName
        });
      }
      // 饼形图表
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        title: {
          text: "销售数量金额统计",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.legendData
        },
        series: [
          {
            name: "销售数量",
            type: "pie",
            radius: "55%",
            center: ["30%", "60%"],
            data: this.seriesNumData,
            avoidLabelOverlap: true,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "销售金额",
            type: "pie",
            radius: "55%",
            center: ["70%", "60%"],
            data: this.seriesMoneyData,
            avoidLabelOverlap: true,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 设置默认时间为 一周
    setDate() {
      // 日期选择器的默认时间
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.dateRange = [start, end];
    }
  },
  created() {
    this.setDate();
  }
};
</script>

<style></style>
